import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import { connect } from "react-redux"
import { getUser, actions } from "../../store/modules/login"
import "../login/login.css"
import img from "../../assets/img/logo1.png"
class Login extends Component {
    render() {
        let { user, userActions: { changeUser, reqLogin,reqLon },history } = this.props;
        return (
            <div id="login">
                <div className="top1">
                    <i className="iconfont">&#xe6bc;</i>
                    <h2>手机登录</h2>
                </div>
                <div className="center1">
                    <img src={img} alt="" />
                    <div>
                        <div>
                            <input type="text" value={user.phone} onChange={(e) => changeUser(e.target.value, "phone")} placeholder="手机号" className="yzm" />
                        </div>
                        <div>
                            <input type="text" onChange={(e) => changeUser(e.target.value, "password")} value={user.password} placeholder="密码" className="yzm" />
                        </div>
                        <button onClick={() => reqLogin(history)} className="in1">登录</button>
                        <button  onClick={() => reqLon(history)} className="in1">注册</button>
                        
                    </div>
                </div>

            </div>
        )
    }
}
let mapStateToProps = state => {
    return {
        user: getUser(state)
    }
}

let mapDispatchToProps = dispath => {
    return {
        userActions: bindActionCreators(actions, dispath),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)
    (Login)
